<template>
  <div class="communityTree">
    <div class="topButton">
      项目选择
      <el-button class="Btn" size="small" type="topSubButtom" style="float:right;clear: both;background: none;"
                 @click="addProject()" v-if="isEdit">
        <svg-icon icon-class="add" class="buttonSvg"/>
        添加
      </el-button>
    </div>
    <el-tree
        ref="refTree"
        empty-text="当前无项目"
        :data="treeList"
        highlight-current
        :props="defaultProps"
        node-key="projectId"
        @node-click="handleNodeClick">
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <div class="treeEdit"><span>{{ node.label }}</span></div>
          <div style="float: left;" v-if="isEdit">
            <a @click="editProject(node, data)" class="edit"> 编辑 </a>
            <a style="margin-left: 8px" @click="delProject(node, data)" class="del"> 删除 </a>
          </div>
        </div>
      </template>
    </el-tree>
  </div>
  <AddProjectDialog ref="AddProjectDialog"/>
</template>

<script>
import AddProjectDialog from "../views/system/components/AddProjectDialog";

let component;
export default {
  name: 'ProjectFileTree',
  components: {AddProjectDialog},
  data() {
    return {
      treeList: [],
      parentId: 0,
      isEdit: true,
      defaultProps: {
        label: 'projectName',
      },
      clickTarget: {},
    };
  },
  methods: {
    async selTreeList(isEdit) {
      component.isEdit = isEdit;
      let response = await component.$asyncPost("project", {
        actionType: "projectTreeQuery"
      });
      if (response.success) {
        //判断
        component.treeList = response.dataList;
        if (response.dataList.length > 0) {
          if (!component.clickTarget.rangeId) component.clickTarget = response.dataList[0]
        }
        component.$nextTick(() => {
          component.$refs.refTree.setCurrentKey(component.clickTarget.projectId);
          component.$emit('selTreeList', component.clickTarget);
        })

      } else {
        component.$message.error(response.message);
      }
    },
    handleNodeClick(data) {
      component.clickTarget = data;
      component.$emit('handleNodeClick', data)
    },
    addProject() {
      component.$refs.AddProjectDialog.showDialog();
    },
    editProject(node, data) {
      console.log(data);
      component.$refs.AddProjectDialog.showDialog(data);
    },
    delProject(node, data) {
      if (!data) {
        if (component.selected.length <= 0) {
          component.$message.warning('请先选择需要删除的设备')
          return;
        }
      }
      this.$confirm("是否删除该所选项目?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "confirm"
      }).then(async () => {
        try {
          let response = await component.$asyncPost("project", {
            actionType: "projectDel",
            projectId: data.projectId
          });
          if (response.success) {
            this.$message.success("删除成功");
            await component.selTreeList(true);
          } else {
            this.$message.error(response.message);
          }
        } catch (error) {
          this.$message.error("删除时发生错误");
        }
      }).catch(() => {
        this.$message.info("取消");
      })
    },
  },
  mounted() {
    component = this;
  }
}

</script>
<style lang='scss' scoped>
.communityTree {
  box-shadow: 3px 3px 17px #131928;
  background: #151617;
  height: 780px;
  border-radius: 5px;
  margin-right: 20px;
  /*  margin-top: 13px;*/
  /*height: 740px;
background: url('../../assets/treeBackground.png') 0 0 no-repeat #292a42;
background-size: 100% 970px;*/
}
.custom-tree-node {
  .edit {
    color: #2e5cff;

    &:hover {
      color: #FFFFFF;
    }
  }

  .del {
    color: #e62ba2;

    &:hover {
      color: #FFFFFF;
    }
  }
}

.projectFileTree {
  box-shadow: 3px 3px 17px #131928;
  background: #151617;
  height: 780px;
  border-radius: 5px;
  margin-right: 20px;
  /*  margin-top: 13px;*/
  /*height: 740px;
background: url('../../assets/treeBackground.png') 0 0 no-repeat #292a42;
background-size: 100% 970px;*/
  p {
    font-size: 14px;

  }
}

.treeEdit {
  float: left;
  width: 130px
}
</style>